<template>
    <ElImage :style="styles" v-bind="props">
        <template #placeholder>
            <slot name="placeholder">
                <div class="w-full h-full flex justify-center items-center">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="80px"
                        height="80px"
                        viewBox="0 0 100 100"
                        preserveAspectRatio="xMidYMid"
                        class="lds-eclipse"
                    >
                        <path
                            stroke="none"
                            d="M10 50A40 40 0 0 0 90 50A40 44 0 0 1 10 50"
                            fill="#fe718d"
                            transform="rotate(54 50 52)"
                        >
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                calcMode="linear"
                                values="0 50 52;360 50 52"
                                keyTimes="0;1"
                                dur="1s"
                                begin="0s"
                                repeatCount="indefinite"
                            />
                        </path>
                    </svg>
                </div>
            </slot>
        </template>
        <template #error>
            <slot name="error"></slot>
        </template>
    </ElImage>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
import { imageProps } from 'element-plus'
import toolsUtil from '~/utils/tools'

const props = defineProps({
    width: {
        type: [String, Number],
        default: '100%'
    },
    height: {
        type: [String, Number],
        default: 'auto'
    },
    radius: {
        type: [String, Number],
        default: 0
    },
    ...imageProps
})

const styles = computed<CSSProperties>(() => {
    return {
        width: toolsUtil.addUnit(props.width),
        height: toolsUtil.addUnit(props.height),
        borderRadius: toolsUtil.addUnit(props.radius)
    }
})
</script>

<style lang="scss" scoped>
.el-image {
    display: block;
    .el-image__error {
        height: 100%;
    }
}
</style>
